<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>操作日志</title>
  <link rel="stylesheet" href="../../static/css/element-ui.css">
  <script src="../../static/js/vue.js"></script>
  <script src="../../static/js/axios.min.js"></script>
  <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
<%--  表格内容--%>
  <el-table
          :data="tableData"
          style="width: 100%"
          :border="true"
          :cell-style="{'text-align':'center'}"
          :header-cell-style="{'text-align':'center'}">
    <el-table-column
            prop="operid"
            show-overflow-tooltip
            label="日志编号">
    </el-table-column>
    <el-table-column
            prop="businessType"
            show-overflow-tooltip
            label="操作类型">
    </el-table-column>
    <el-table-column
            prop="operName"
            show-overflow-tooltip
            label="操作人员">
    </el-table-column>
    <el-table-column
            prop="operUrl"
            show-overflow-tooltip
            label="请求地址">
    </el-table-column>
    <el-table-column
            prop="operip"
            show-overflow-tooltip
            label="操作地址">
    </el-table-column>

    <el-table-column
            fixed="right"
            prop="status"
            label="状态"
    >
      <template slot-scope="scope">
        <el-tag
                v-if="scope.row.status === 0"
                type="info"
                disable-transitions>禁用
        </el-tag>
        <el-tag
                v-else="scope.row.status === 1"
                type="success"
                disable-transitions>启用
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
            prop="operTime"
            show-overflow-tooltip
            label="操作日期">
    </el-table-column>
  </el-table>


  <!--分页组件：
                 @size-change:触发 改变每页显示的记录条数
                 @current-change: 改变页码时触发的函数
                 current-page: 显示的当前页面
                 page-sizes: 页面大小的下拉框
                 page-size: 默认每页显示的条数
                 total: 总条数
            -->
  <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
  </el-pagination>
</div>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      //表格内容
      tableData: [],
      //当前页面
      currentPage: 1,
      //每条默认条数
      pageSize: 5,
      //总条数
      total: 0,

    },
    created() {
      this.inittable();
    },
    methods: {
      /* 表格格式化 */
      inittable() {
        let self = this;
        axios.post("/sysOperLog?currentPage=" + this.currentPage + '&pageSize=' + this.pageSize).then(function (resp) {
          console.log(resp)
          self.tableData = resp.data.rows
          self.total = resp.data.total
        })
      },
      /* 改变也页面大小*/
      handleSizeChange(val) {
        this.pageSize = val;
        this.inittable();
      },
      /* 改变显示页码 */
      handleCurrentChange(val) {
        this.currentPage = val;
        this.inittable();
      }
    }
  })
</script>
</body>
</html>
